<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>06.获取服务器响应数据的另一种方式</title>
  </head>
  <body>
    <h1>Ajax 状态值 (readyState)</h1>
    <p>
      Ajax
      对象创建，配置，发送请求和接收完服务器端响应数据，这其中的每个过程都有对应一个数值，这个数值就是
      Ajax 状态值 readyState
    </p>
    <pre>
// 1. 创建 ajax
    const xhr = new XMLHttpRequest();
// 2. 配置 ajax
    xhr.open('method','url')
// 3. 发送请求
     xhr.send()
  </pre
    >
    获取状态值的方法:
    <pre>
xhr.readyState
</pre
    >
    状态值：
    <ul>
      <li>0. (未初始化) 还没调用 open()</li>
      <li>1. 请求已经建立，但是还没发送 send()</li>
      <li>2. 请求已经发送 send()已经执行</li>
      <li>3. 请求正在处理，通常响应中已经有部分数据可以用了</li>
      <li>4. 响应已经完成，可以获取并使用服务器的响应</li>
    </ul>
    <p>
      姓名:
      <input type="text" name="username" id="username" />
    </p>
    <p>
      年龄:
      <input type="text" name="age" id="age" />
    </p>
    <p>
      <input type="button" value="提交" id="commit" />
    </p>
    <p>提交的数据是：<span class="commit"></span></p>
  </body>
</html>
<script>
  let btn = document.getElementById("commit");
  let username = document.getElementById("username");
  let age = document.getElementById("age");
  btn.onclick = function () {
    let nameValue = username.value;
    let ageValue = age.value;
    console.log(nameValue);
    console.log(ageValue);
    /*
     *     ajax 异步提交
     */
    // 1.创建ajax 对象
    const xhr = new XMLHttpRequest();
    console.log("1:" + xhr.readyState);
    //获取表单提交的数据
    // let params = "username=" + nameValue + "&age=" + ageValue;
    let params = {
      username: nameValue,
      age: ageValue,
    };
    //需要将表单数据做
    xhr.open("get", "http://localhost:3000/readyState");
    console.log("2:" + xhr.readyState);
    /*
     *   判断xhr的readyState
     *
     */
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 0) {
        console.log("0.xhr还没初始化");
      } else if (xhr.readyState === 1) {
        console.log("1.xhr已经完成初始化，但是还没发送请求");
      } else if (xhr.readyState === 2) {
        console.log("2.请求已经发送");
      } else if (xhr.readyState === 3) {
        console.log("3.请求已经在处理中");
      } else {
        // xhr.readyState === 4
        console.log("4.响应已经完成");
        document.getElementsByClassName("commit")[0].innerHTML =
          xhr.responseText; // 获取服务器响应数据的另一种方式
      }
    };
    console.log("3：" + xhr.readyState);
    xhr.send();
    console.log("4:" + xhr.readyState);
  };
</script>
